<!--
 * @Author: daidai
 * @Date: 2022-02-28 16:16:42
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-10-25 09:18:22
 * @FilePath: \web-pc\src\pages\big-screen\view\indexs\left-center.vue
-->
<template>
  <component v-if="empty" :is="components"></component> 
  <dv-capsule-chart v-else :config="config" style="width:100%;height:260px" />
</template>

<script>
import * as API from '@/api/api'
import Kong from '@/components/kong.vue';
export default {
  components: { Kong },
  data() {
    return {
      components: Kong,
      empty: true,
      config: {
        showValue: true,
        unit: "位",
        data: []
      },

    };
  },
  created() {
    this.getData()
  },
  computed: {
    getAdcode() {
      return this.$store.state.adcode;
    }
  },
  watch: {
    getAdcode() {
      this.srcList = [];
      this.getData();
    }
  },
  mounted() { },
  beforeDestroy() {
    this.clearData()
  },
  methods: {
    clearData() {
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    //轮询
    switper() {
      if (this.timer) {
        return
      }
      let looper = (a) => {
        this.getData()
      };
      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime);
    },
    getData() {
      API.GET('/traffic/career', { limit: 10, adcode: this.$store.state.adcode }).then(res => {
        if (!this.timer) {
          // console.log('职业', res);
        }
        if (res.code == '0') {
          if (res.data.length == 0) {
            this.empty = true;
            return;
          }
          this.empty = false;
          this.config = {
            ...this.config,
            data: res.data
          }
          // this.switper()
        } else {
          this.$Message({
            text: res.msg,
            type: 'warning'
          })
        }
      })
    },
  },
};
</script>
<style lang='scss' scoped>
</style>